/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

$toggle-tab-width: 38px;
$toggle-tab-height: 200px;
$border-radius: 5px;
$collapsible-width: 390px;

.collapsible-sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 1000;

  &.backdrop {
    background-color: rgba(0, 0, 0, 0.7);
  }

  &.expanded {
    width: initial;
    left: 0;
    right: 0;
  }

  .collapsible-toggle-tab {
    position: absolute;
    top: 50%;
    transform: translateX(-50%) rotate(-90deg);
    height: $toggle-tab-width;
    line-height: $toggle-tab-width;
    width: $toggle-tab-height;
    background-color: #cccccc;
    cursor: pointer;
    box-shadow: 0px 4px 21px 2px rgba(0, 0, 0, 0.4);
  }

  .toggle-tab-label {
    font-weight: bold;
  }

  .collapsible-content {
    position: absolute;
    width: 0;
    top: 97px;
    bottom: 54px;
    background-color: white;
    &.show-content {
      width: $collapsible-width;
      box-shadow: 0px 4px 21px 2px rgba(0, 0, 0, 0.4);

      .collapsible-body { display: block; }
    }

    .collapsible-body { display: none; }
  }

  &.left {
    .collapsible-content {
      border-bottom-right-radius: $border-radius;
      border-top-right-radius: $border-radius;
      left: 0;
    }

    .collapsible-toggle-tab {
      right: -($toggle-tab-height + ($toggle-tab-width / 2));
      border-bottom-right-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }
  }

  &.right {
    right: 0;

    .collapsible-content {
      right: 0;
      border-bottom-left-radius: $border-radius;
      border-top-left-radius: $border-radius;
    }

    .collapsible-toggle-tab {
      left: -($toggle-tab-width / 2);
      border-top-right-radius: $border-radius;
      border-top-left-radius: $border-radius;
    }
  }

}
